<template>
  <van-list
    v-model="loading"
    :finished="finished"
    :immediate-check="false"
    @load="onLoad"
  >
    <van-cell v-for="item in dataList" :key="item.filmId" @click="toDetail(item.filmId)">
      <img :src="item.poster" alt="" />
      <h3>{{ item.name }}</h3>
      <p>观众评分:{{ item.grade }}</p>
      <p class="actor">主演:{{ item.actors | actorFilter }}</p>
      <p>上映时间:{{ item.nation }} | {{ item.runtime }}分钟</p>
    </van-cell>
  </van-list>
</template>

<script>
import http from '../../utils'

export default {
  data() {
    return {
      loading: false,
      finished: false,
      dataList: [],
      total: 0,
      current: 1
    }
  },
  filters: {
    actorFilter(actors) {
      if(!actors) return '暂无主演'
      return actors.map(item => item.name).join(' ')
    }
  },
  methods: {
    onLoad() {
      // 判断分页请求是否完成，当前的数据小于total
      if(this.dataList.length === this.total && this.dataList.length) {
        this.finished = true
        return
      }
      this.current++
      http({
        url: `gateway?cityId=310100&pageNum=${this.current}&pageSize=10&type=1&k=136082`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then((res) => {
        console.log(res);
        const { films, total } = res.data.data
        this.dataList = [...this.dataList, ...films]
        this.total = total
        this.loading = false
      })
    },
    // 跳转详情
    toDetail(id) {
      this.$router.push(`/detail?id=${id}`)
    }
  },
  mounted() {
    // 首次请求电影数据
    http({
      url: 'gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=136082',
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then((res) => {
      console.log(res);
      const { films, total } = res.data.data
      this.dataList = films
      this.total = total
    })
  }
}
</script>

<style lang="less" scoped>
  .actor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .van-cell {
    overflow: hidden;
    padding: 10px;
    img {
      margin-right: 10px;
      float: left;
      width: 66px;
    }
  }
</style>